<template>
    <Dialog title="计划详情" v-model="dialogVisible" :fullFlag="true" width="70%">
        <ContentWrap title="CA" v-if="caList.length > 0">
            <el-table v-loading="loading" :data="caList" :stripe="true" :show-overflow-tooltip="true">
                <el-table-column label="客户公司" align="center" prop="companyName" />
                <el-table-column label="运单号" align="center" prop="mainOrderId" width="150" />
                <el-table-column label="订单号" align="center" prop="orderId" width="100" />
                <el-table-column label="目的港" align="center" prop="destinationCityName" />
                <el-table-column label="件数" align="center" prop="warehouseNumber" width="60"/>
                <el-table-column label="计划" align="center" prop="planStatus" :formatter="planStatusFormat" width="150"/>
                <el-table-column label="随机" align="center" prop="randomFlag" :formatter="randomFlagFormat" width="100"/>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                <el-button
                    link
                    type="primary"
                    @click="viewForm(scope.row)"
                    v-hasPermi="['business:cargo-info:query']"
                >
                    查看订单
                </el-button>
                <el-button
                    link
                    type="primary"
                    @click="cancelForm(scope.row, scope.index, 1)"
                    v-show="(scope.row.status == 3) || (scope.row.status == 5 && scope.row.storage == 0)"
                    v-hasPermi="['business:cargo-info:query']"
                >
                    取消计划
                </el-button>
                </template>
            </el-table-column>
            </el-table>
        </ContentWrap>

        <ContentWrap title="BGS" v-if="bgsList.length > 0">
            <el-table v-loading="loading" :data="bgsList" :stripe="true" :show-overflow-tooltip="true">
                <el-table-column label="客户公司" align="center" prop="companyName" />
                <el-table-column label="运单号" align="center" prop="mainOrderId" width="150" />
                <el-table-column label="订单号" align="center" prop="orderId" width="100" />
                <el-table-column label="目的港" align="center" prop="destinationCityName" />
                <el-table-column label="件数" align="center" prop="warehouseNumber" width="60"/>
                <el-table-column label="计划" align="center" prop="planStatus" :formatter="planStatusFormat" width="150"/>
                <el-table-column label="随机" align="center" prop="randomFlag" :formatter="randomFlagFormat" width="100"/>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                <el-button
                    link
                    type="primary"
                    @click="viewForm(scope.row)"
                    v-hasPermi="['business:cargo-info:query']"
                >
                    查看订单
                </el-button>
                <el-button
                    link
                    type="primary"
                    @click="cancelForm(scope.row, scope.index, 2)"
                    v-hasPermi="['business:cargo-info:query']"
                >
                    取消计划
                </el-button>
                </template>
            </el-table-column>
            </el-table>
        </ContentWrap>
        <template #footer>
            <el-button @click="submitForm()" type="primary" :disabled="formLoading">保 存</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
        </template>
    </Dialog>
    <CargoInfoView ref="CargoInfoViewRef"/>
</template>

<script setup lang="ts">
import { CargoPlanApi} from '@/api/business/cargoplan'
import CargoInfoView from './CargoInfoView.vue'
import { dateFormatter } from '@/utils/formatTime'
import {useUserStore} from '@/store/modules/user'

/** 货物资料 列表 */
defineOptions({ name: 'CargoPlanView' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const userStore = useUserStore();
const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(true) // 列表的加载中

const caList = ref([]);
const bgsList = ref([]);

const planStatusFormat = (row, index, cell)=>{
  if(cell == 0){
    return "";
  }else if(cell == 1){
    return "待下发计划"
  }else if(cell == 2){
    return "计划中"
  }else if(cell == 3){
    return "计划完成"
  }else{
    return "";
  }
}

const randomFlagFormat = (row, index, cell)=>{
  if(cell == 0){
    return "否";
  }else if(cell == 1){
    return "是"
  }else{
    return "";
  }
}

const CargoInfoViewRef = ref();
const viewForm = (row)=>{
    CargoInfoViewRef.value.open(row.id);
}

const delCargoIds = ref<number[]>([]);

const cancelForm = (row, index, tag)=>{
    delCargoIds.value.push(row.id);
    if(tag == 1){
        caList.value.splice(index, 1)
    }else{
        bgsList.value.splice(index, 1)
    }
    // await CargoPlanApi.updateCargoPlan({
    //     id: planId.value,
    //     cargoIds: [...clist1.value, ...clist2.value]
    // });

}

const emit = defineEmits(['success']) 
const submitForm = async()=>{
    if(delCargoIds.value.length > 0){
        await CargoPlanApi.updateCargoPlan({
            id: planId.value,
            cargoIds: delCargoIds.value
        });
        message.success('保存成功')
        // 发送操作成功的事件
        emit('success')
    }
    
    dialogVisible.value = false
    
}

const planId = ref();

/** 打开弹窗 */
const open = async (id: number) => {
    planId.value = id;
    loading.value = true
    try {
        dialogVisible.value = true
    
        let data = await CargoPlanApi.getCargoPlan(id)
        caList.value = data.filter(item=>{
            return item.theGround == 1;
        })
        bgsList.value = data.filter(item=>{
            return item.theGround == 2;
        })
    } finally {
        loading.value = false
    }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗


</script>
